<template>
  <div>
    <Category :disabled="!isShowList" />
    <el-card
      shadow="always"
      :style="{ padding: '20px', marginTop: '20px' }"
      v-show="isShowList"
    >
      <div slot="header">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="openAdd"
          :disabled="!category3id"
          >添加属性</el-button
        >
      </div>
      <el-table :data="attrList" v-loading="loading" border stripe>
        <el-table-column label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column label="属性名称" prop="attrName"> </el-table-column>
        <el-table-column label="属性值列表">
          <template v-slot="{ row }">
            <el-tag
              type="success"
              size="small"
              :style="{ marginLeft: '10px' }"
              v-for="item in row.attrValueList"
              :key="item.id"
              >{{ item.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="reWriteAttr(row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="delItem(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      v-show="!isShowList"
    >
      <el-form label-width="80" :inline="false" size="normal">
        <el-form-item label="属性名">
          <el-input
            :style="{ width: '30%' }"
            v-model="attrInfo.attrName"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="80">
          <el-button
            type="primary"
            size="small"
            @click="createValueItem"
            :disabled="!attrInfo.attrName"
            >立即创建</el-button
          >
          <el-button size="small" @click="isShowList = true">取消</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="attrInfo.attrValueList"
        :style="{ margin: '20px 0px' }"
        border
        stripe
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column label="属性值名称">
          <template v-slot="{ row, $index }">
            <el-input
              ref="Writemode"
              v-model="row.valueName"
              size="normal"
              clearable
              v-if="row.isWrite"
              @blur="changeOnlook(row, $index)"
            ></el-input>
            <div v-else @click="changeWriteMode(row)">{{ row.valueName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ $index }">
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="delAttrValueItem($index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" size="small" @click="saveAttrItem"
        >保存</el-button
      >
      <el-button size="small" @click="isShowList = true">取消</el-button>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { cloneDeep } from "lodash";
import { getAttrsList, addAttrsItem, delAttrsItem } from "@/api/attrs";
export default {
  name: "Attr",
  data() {
    return {
      attrList: [],
      loading: false,
      // 用于存储添加数据的请求数据
      attrInfo: {
        id: "",
        attrName: "",
        categoryId: this.category3id,
        categoryLevel: 3,
        attrValueList: [],
      },
      //
      isShowList: true,
    };
  },
  watch: {
    "$store.state.category.category3id": async function (newVal) {
      if (!newVal) return;
      this.getAttrsListDate();
    },
  },
  mounted() {
    if (this.$store.state.category.category3id) {
      this.getAttrsListDate();
    }
  },
  methods: {
    async getAttrsListDate() {
      this.loading = true;
      const { category1id, category2id, category3id } = this;
      let re = await getAttrsList(category1id, category2id, category3id);
      this.attrList = re;
      this.loading = false;
    },
    // 点击进入新增页面
    openAdd() {
      // 清除上一次的数据防止污染
      this.attrInfo = {
        id: "",
        attrName: "",
        categoryId: this.category3id,
        categoryLevel: 3,
        attrValueList: [],
      };
      this.isShowList = false;
    },
    // 点击立即创建创建单个value数据
    createValueItem() {
      this.attrInfo.attrValueList.push({
        valueName: "",
        isWrite: true,
      });
      // 打开时自动获取焦点
      //数据修改需要事件,需要使用nextTick
      this.$nextTick(() => {
        this.$refs.Writemode.focus();
      });
    },
    // 点击重新进入书写模式
    changeWriteMode(row) {
      row.isWrite = true;
      this.$nextTick(() => {
        this.$refs.Writemode.focus();
      });
    },
    // 切换到展示模式
    changeOnlook(row, index) {
      row.isWrite = false;
      //去重
      const flag = this.attrInfo.attrValueList.filter(
        (item) => item.valueName === row.valueName
      );
      // 去空
      if (!row.valueName || flag.length >= 2) {
        this.attrInfo.attrValueList.splice(index, 1);
      }
    },
    //删除当前value行
    delAttrValueItem(index) {
      this.attrInfo.attrValueList.splice(index, 1);
    },
    // 保存/发送请求
    async saveAttrItem() {
      // 以防万一,重新获取一次3id
      this.attrInfo.categoryId = this.category3id;
      await addAttrsItem(this.attrInfo);
      this.$message({
        message: "修改成功",
        type: "success",
      });
      // 返回list并重新获取数据
      this.isShowList = true;
      this.getAttrsListDate();
    },
    // 点击覆写AttrValue
    reWriteAttr(row) {
      this.attrInfo = cloneDeep(row);
      this.isShowList = false;
      row.attrValueList.forEach((item) => {
        this.$set(item, "isWrite", false);
      });
    },
    //删除单项Item
    async delItem(index) {
      await delAttrsItem(index);
      this.$message({
        message: "删除成功",
        type: "success",
      });
      // 删除并重新获取数据
      this.getAttrsListDate();
    },
  },
  computed: {
    ...mapState("category", ["category1id", "category2id", "category3id"]),
  },
};
</script>

<style >
</style>